<template>
  <div class="app-container">
    <el-row :gutter="0">
      <el-col :span="4">
        <el-input
            v-model="searchInput"
            placeholder="......"
            clearable
            prefix-icon="el-icon-search"
            style="margin-bottom: 10px; width: 200px"
            @input="deptSearch"
        />
        <el-tree
            :default-expand-all="true"
            :data="mockDeptData"
            :props="defaultProps"
            ref="deptTree"
            @node-click="handleNodeClick"
            :filter-node-method="filterDeptNode"
        />
      </el-col>
      <el-col :span="20">
        <el-row style="margin-top: 10px">

          <el-col :span="21">
            <el-form :model="queryParams" :inline="true" v-if="showAdvancedSearch">
              <el-form-item prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入姓名" style="width:200px" clearable/>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input v-model="queryParams.phone" placeholder="请输入电话" style="width:200px" clearable/>
              </el-form-item>
              <el-form-item prop="position">
                <el-input v-model="queryParams.position" placeholder="请输入岗位" style="width:200px" clearable/>
              </el-form-item>
              <el-form-item prop="email">
                <el-input v-model="queryParams.email" placeholder="请输入邮箱" style="width:200px" clearable/>
              </el-form-item>
              <el-form-item>
                <el-button :icon="Search" @click="handleQuery" circle/>
                <el-button link type="primary" @click="resetEmployeeQuery" class="search-button">重置</el-button>
                <el-button link type="primary" @click="addEmployee" class="search-button">新增</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="3">
            <el-button link type="primary" @click="toggleAdvancedSearch">{{showAdvancedSearch ? '收起' : '显示搜索'}}
            </el-button>
          </el-col>
        </el-row>
        <el-table :data="filteredEmployeeData" :header-cell-style="{ color: '#000000' }">
          <el-table-column prop="id" label="编号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="position" label="岗位"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="200px"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="entryDay" label="入职日期"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" link @click="editEmployee(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="编辑" v-model="dialogShow" center="true" width="500px">
          <el-form v-model="employeeForm" label-position="right" label-width="80px" class="form-center">
            <el-form-item label="姓名">
              <el-input v-model="employeeForm.name" placeholder="请输入姓名" style="width:200px" clearable/>
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="employeeForm.position" placeholder="请输入岗位" style="width:200px" clearable/>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="employeeForm.email" placeholder="请输入邮箱" style="width:200px" clearable/>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="employeeForm.phone" placeholder="请输入电话" style="width:200px" clearable/>
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button @click="dialogShow = false">取 消</el-button>
            <el-button type="primary" @click="editConfirm">确 定</el-button>
          </template>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {mockDeptData} from "../../../mock/dept";
import {mockEmployeeData} from "../../../mock/employee";
import {Search} from '@element-plus/icons-vue';
import {ref} from "vue";
import router from "../../router";
import {useAppStore} from "@/store"


const searchInput = ref('')
const deptTree = ref(null)
const dialogShow = ref(false)
const showAdvancedSearch = ref(false)
const appStore = useAppStore()

const queryParams = ref({
  name: '',
  position: '',
  email: '',
  phone: ''
})

//清空员工搜索
const resetEmployeeQuery = () => {
  queryParams.value = {}
  filteredEmployeeData.value = mockEmployeeData;
}

//点击搜索
const handleQuery = () => {
  const {name, position, email, phone} = queryParams.value;
  const filters = [];

  if (name) filters.push((employee) => employee.name.includes(name));
  if (position) filters.push((employee) => employee.position.includes(position));
  if (email) filters.push((employee) => employee.email.includes(email));
  if (phone) filters.push((employee) => employee.phone.includes(phone));

  const filteredData = mockEmployeeData.filter((employee) => {
    return filters.every((filter) => filter(employee));
  });
  filteredEmployeeData.value = filteredData;
}

//部门搜索
const deptSearch = () => {
  if (searchInput.value === '') {
    // 清空输入时，收缩所有节点
    deptTree.value.filter('');
    if (deptTree.value && deptTree.value.store) {
      Object.values(deptTree.value.store.nodesMap).forEach(node => {
        node.expanded = false;
      });
    }
  } else {
    deptTree.value.filter(searchInput.value);
  }
}

//树形节点属性
const defaultProps = {
  children: 'children',
  label: 'name'
};

//切换搜索栏
const toggleAdvancedSearch = () => {
  showAdvancedSearch.value = !showAdvancedSearch.value;
}

//过滤部门节点
const filterDeptNode = (value, data) => {
  if (!value) return true;
  return data.name.indexOf(value) !== -1;
};

//点击部门节点
const handleNodeClick = (data) => {
  const selectedPath = getFullPath(data);
  queryParams.value = {}
  filteredEmployeeData.value = mockEmployeeData.filter(employee => employee.department.indexOf(selectedPath) !== -1);
};

//模拟员工数据
const filteredEmployeeData = ref(mockEmployeeData);

//获取节点的全路径
const getFullPath = (node) => {
  let path = node.name;
  let parent = node.parent;

  while (parent) {
    path = parent.name + ' - ' + path;
    parent = parent.parent;
  }
  return path;
};

//弹窗数据
const employeeForm = ref({})

//点击编辑
const editEmployee = (row) => {
  console.log(row.id);
  Object.keys(employeeForm).forEach((item) => {
    employeeForm[item] = row[item];
  });
  dialogShow.value = true;
}

const editConfirm = () => {
  dialogShow.value = false;
}


const addEmployee = () => {
  // router.push({path: '/adduser', query: {id: 1234, name: 'abcd'}});
  // router.push({name:'addDeptUser', params: {id: 1234, name: 'abdc', position: '研发' }});
  appStore.addDeptUser({
    id: 1,
    name: '张三',
    position: '工程师',
    email: 'zhangsan@example.com'
  })
  router.push('/adduser');
}

</script>

<style scoped>
.form-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>